<template>
  <div class="main-container">
    <div class="header-container">
      <h1>津房科技</h1>
    </div>
    <div class="tags-views-container">
      <router-link to="/power" class="tags-views-item">
        <div class="bim-icon bim-icon-power"></div>
        <div class="text">电力</div>
      </router-link>
      <router-link to="" class="tags-views-item">
        <div class="bim-icon bim-icon-perimeter"></div>
        <div class="text">周界</div>
      </router-link>
      <router-link to="" class="tags-views-item">
        <div class="bim-icon bim-icon-entry"></div>
        <div class="text">进出入管理</div>
      </router-link>
      <router-link to="" class="tags-views-item">
        <div class="bim-icon bim-icon-environment"></div>
        <div class="text">环境</div>
      </router-link>
      <router-link to="/tower" class="tags-views-item">
        <div class="bim-icon bim-icon-tower"></div>
        <div class="text">塔吊</div>
      </router-link>

      <div class="mosaic-corner">
        <div class="column-flex">
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
        <div class="column-flex">
          <div class="square-block"></div>
          <div class="square-block"></div>
        </div>
      </div>
    </div>
    <div class="dashboard-container">
      <div class="bim-row">
        <div class="bim-col bim-col-520">
          <div class="card-panel card-panel-entry">
            <div class="module-title">进出入管理</div>
            <div class="module-body">
              <div class="personal">
                <transition-group
                  tag="div"
                  name="slide-fade">
                  <div class="personal-item" v-for="item in listData" :key="item.id" :class="item.state == 'out' ? 'exit' : ''">
                    <div class="item-profile">
                      <img :src="item.logo" alt="">
                    </div>
                    <div class="item-main">
                      <div class="item-type">{{item.job_type}}</div>
                      <div class="item-extra">
                        <div class="item-name">{{item.user_name}}</div>
                        <div class="item-time">{{item.created_at}}</div>
                        <div class="item-status">{{item.state == 'in' ? '进入' : '出场'}}</div>
                      </div>
                    </div>
                    <a href="javascript:;" class="item-corner"></a>
                  </div>
                </transition-group>
              </div>
            </div>
          </div>
          <div class="card-panel card-panel-tower">
            <div class="module-title">塔吊</div>
            <div class="module-body">
              <div class="main-tower">
                <div class="chart-select">
                  <circle-chart id="circleChart" width="100%" height="100%" @func="change" />
                </div>
                <div class="data-info">
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.height}}m</h1>
                      <p>高度 Height</p>
                    </div>
                  </div>
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.weight}}t</h1>
                      <p>承重量 Weight</p>
                    </div>
                  </div>
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.range}}m</h1>
                      <p>幅度 Range</p>
                    </div>
                  </div>
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.wind}}m/s</h1>
                      <p>风速 Wind</p>
                    </div>
                  </div>
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.moment}}%</h1>
                      <p>力矩 Moment</p>
                    </div>
                  </div>
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.dip}}°</h1>
                      <p>倾角 Dip</p>
                    </div>
                  </div>
                  <div class="data-info-item">
                    <div class="icn-spin"></div>
                    <div class="desc">
                      <h1>{{towerData.rotation}}°</h1>
                      <p>回转角度 Rotation</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bim-col bim-col-760">
          <div class="card-panel card-panel-map">
            <div class="module-title">整体区域地图</div>
            <div class="module-body">
              <div id="container" class="map-container" style="height: 449px">
                <model-obj
                  src="http://demo-dev.sadpu.com/assets/model/male02/male02.obj"
                  mtl="http://demo-dev.sadpu.com/assets/model/male02/male02.mtl"
                  :position="{ x: 0, y: 0, z: -40 }"
                  :rotation="{ x: 0, y: 0, z: 0 }"
                  :cameraPosition="{ x: 0, y: 0, z: 0 }"
                  :cameraRotation="{ x: 0, y: 0, z: 0 }"
                  :scale="{ x: 0.8, y: 0.8, z: 0.8 }"
                  backgroundColor="rgb(255, 255, 255)"
                  :backgroundAlpha="0"></model-obj>
                <div class="warning-panel" :class="isShow">
                  <div class="warning-item" v-for="item in topMsgData" :key="item.id">
                    <div class="warning-pic" :style="{'background-image': 'url(' + item.pic_url + ')'}"></div>
                    <div class="warning-info">
                      {{item.event_msg}} {{item.event_module}} {{item.created_at}}</div>
                  </div>
                </div>
              </div>
              <!--<div class="map-container">-->
                <!--<video autoplay muted loop playsinline>-->
                  <!--<source src="http://demo-dev.sadpu.com/uploads/media/bg-temp.mp4" type="video/mp4">-->
                <!--</video>-->
                <!--<div class="warning-panel" :class="isShow">-->
                  <!--<div class="warning-item" v-for="item in topMsgData" :key="item.id">-->
                    <!--&lt;!&ndash;<img :src="item.pic_url" class="warning-pic">&ndash;&gt;-->
                    <!--<div class="warning-pic" :style="{'background-image': 'url(' + item.pic_url + ')'}"></div>-->
                    <!--<div class="warning-info">-->
                      <!--{{item.event_msg}} {{item.event_module}} {{item.created_at}}-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
        <div class="bim-col bim-col-520">
          <div class="card-panel card-panel-environment">
            <div class="module-title">环境</div>
            <div class="module-body">
              <div class="env-container">
                <div class="env-left">
                  <div class="env-li">
                    <h3>{{envData.tmp}}°C</h3>
                    <p>温度</p>
                  </div>
                  <div class="env-li">
                    <h3>{{envData.pm25}}</h3>
                    <p>PM2.5</p>
                  </div>
                  <div class="env-li">
                    <h3>{{envData.hum}}%</h3>
                    <p>湿度</p>
                  </div>
                  <div class="env-li">
                    <h3>{{envData.wind_sc}}级</h3>
                    <p>风力</p>
                  </div>
                </div>
                <div class="env-right">
                  <div class="weather-block">
                    <img :src="getIcon(envData.cond_code)" style="width: 36px;margin-left: -10px" v-if="envData.cond_code">
                    <p>{{envData.cond_txt}}</p>
                  </div>
                  <div class="week">{{nowTimes.week}}</div>
                  <div class="date">{{nowTimes.yy}} 年 {{nowTimes.mm}} 月 {{nowTimes.dd}} 日</div>
                  <div class="clock">
                    <div class="hour">{{nowTimes.hour}}</div>
                    <div class="minute">{{nowTimes.minute}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="env-corner"></div>
          </div>
          <div class="card-panel card-panel-perimeter">
            <div class="module-title">周界</div>
            <div class="module-body">
              <transition
                name="slide-fade2"
                mode="out-in">
                <div class="perimeter-item" v-for="item in topMsgData" :key="item.id">
                  <div class="perimeter-detail">
                    <h3 class="title">{{item.event_msg}}</h3>
                    <div class="type">{{item.event_module}}</div>
                    <div class="datetime">{{item.created_at}}</div>
                  </div>
                  <div class="perimeter-pic">
                    <img :src="item.pic_url" alt="" v-if="item.pic_url">
                  </div>
                </div>
              </transition>
            </div>
          </div>
        </div>
      </div>
      <div class="bim-row">
        <div class="bim-col bim-col-full">
          <div class="card-panel">
            <div class="chart-container">
              <Chart width="100%" height="100%" @func="legendData" />
            </div>
            <!--<el-tabs type="border-card" class="custom">-->
              <!--<el-tab-pane>-->
                <!--<span slot="label"><i class="el-icon-date"></i> 电力</span>-->
                <!--<el-tabs type="border-card">-->
                  <!--<el-tab-pane label="第一组">-->
                  <!--</el-tab-pane>-->
                  <!--<el-tab-pane label="第二组">第二组</el-tab-pane>-->
                <!--</el-tabs>-->
              <!--</el-tab-pane>-->
              <!--<el-tab-pane label="电流">-->
                <!--<el-tabs type="border-card">-->
                  <!--<el-tab-pane label="第一组">第一组</el-tab-pane>-->
                  <!--<el-tab-pane label="第二组">第二组</el-tab-pane>-->
                <!--</el-tabs>-->
              <!--</el-tab-pane>-->
            <!--</el-tabs>-->
          </div>
        </div>
      </div>
    </div>
    <div class="footer-container">
      <p class="copyright">由<b>圣德堡（天津）科技有限公司</b>提供物联网及人工智能技术支持与服务</p>
    </div>
  </div>
</template>
<script>
import Chart from '@/components/Charts/LineMarker'
import CircleChart from '@/components/Charts/CircleMarker'
import Velocity from 'velocity-animate'
// import echarts from 'echarts'
import * as Three from 'three'
// import OrbitControls from 'three-orbit-controls'
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import { ModelObj } from 'vue-3d-model'

export default {
  components: {
    Chart,
    CircleChart,
    ModelObj
  },
  data () {
    return {
      show: true,
      stop: false,
      listData: [],
      topMsgData: [],
      towerData: {
        height: 36,
        weight: 368,
        range: 35,
        wind: 15,
        moment: 152,
        dip: 5,
        rotation: 347.4
      },
      nowTimes: {
        yy: '0000',
        mm: '00',
        dd: '00',
        hour: '00',
        minute: '00',
        week: '星期'
      },
      camera: null,
      bigImage: null,
      scene: null,
      renderer: null,
      mesh: null,
      fullTime: false,
      envData: {
        id: 0,
        pm25: 25.6,
        hum: 36,
        wind_sc: 3,
        tmp: 25
      },
      isShow: {
        'warning-hide': true,
        show_in: false,
        show_out: false
      },
      interval: null,
      publicPath: process.env.BASE_URL
    }
  },
  created () {
    const _self = this

    _self.setNowTimes()
    _self.getList()
    _self.getMessageList()
    _self.getEnv()
    _self.socketInit()
  },
  mounted () {
    const _self = this
    setInterval(() => {
      _self.setNowTimes()
    }, 1000)

    // this.init()
    // this.animate()
  },
  watch: {
    fullTime () {
      if (this.fullTime) {
        this.isShow = {
          'warning-hide': false,
          show_in: true,
          show_out: false
        }
      } else {
        this.isShow = {
          'warning-hide': false,
          show_in: false,
          show_out: true
        }
      }
    }
  },
  methods: {
    init () {
      // const container = document.getElementById('container')
      // this.camera = new Three.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10)
      // this.camera.position.z = 0.6
      // this.scene = new Three.Scene()
      // const geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
      // const material = new Three.MeshNormalMaterial()
      // this.mesh = new Three.Mesh(geometry, material)
      // this.scene.add(this.mesh)
      //
      // this.renderer = new Three.WebGLRenderer({ antialias: true })
      // this.renderer.setSize(container.clientWidth, container.clientHeight)
      // container.appendChild(this.renderer.domElement)

      const container = document.getElementById('container')
      const _self = this
      _self.camera = new Three.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000)
      _self.camera.position.z = 0.6
      _self.scene = new Three.Scene()

      _self.renderer = new Three.WebGLRenderer({ antialias: true })
      // _self.renderer.setPixelRatio(window.devicePixelRatio)
      _self.renderer.setSize(container.clientWidth, container.clientHeight)
      container.appendChild(_self.renderer.domElement)

      let mtlLoader = new MTLLoader()

      mtlLoader.setTexturePath(`${_self.publicPath}model/`)
      mtlLoader.load('site.mtl', (materials) => {
        materials.preload()
        let objLoader = new OBJLoader()
        objLoader.setMaterials(materials)
        objLoader.setPath(`${_self.publicPath}model/`)
        objLoader.load('site.obj', (obj) => {
          obj.scale.x = obj.scale.y = obj.scale.z = 100
          obj.rotation.y = 500
          let mesh = obj
          mesh.position.y = -50
          _self.scene.add(mesh)
        })
      })
    },
    animate () {
      requestAnimationFrame(this.animate)
      // this.mesh.rotation.x += 0.01
      // this.mesh.rotation.y += 0.02
      this.renderer.render(this.scene, this.camera)
    },
    setNowTimes () {
      const myDate = new Date()
      this.nowTimes.yy = myDate.getFullYear()
      this.nowTimes.mm = myDate.getMonth() + 1
      this.nowTimes.dd = String(this.appendZero(myDate.getDate()))
      this.nowTimes.week = '星期' + '日一二三四五六'.charAt(myDate.getDay())
      this.nowTimes.hour = String(this.appendZero(myDate.getHours()))
      this.nowTimes.minute = String(this.appendZero(myDate.getMinutes()))
    },
    appendZero (obj) {
      return obj < 10 ? '0' + obj : obj
    },
    socketInit () {
      const ws = new WebSocket(this.$wsUrl)
      const _self = this
      ws.onmessage = evt => {
        /* eslint-disable no-eval */
        const res = eval('(' + evt.data + ')')

        clearInterval(_self.interval)
        switch (res.module) {
          case 'env':
            _self.envData = res.data
            break
          case 'perimeter':
            if (!_self.fullTime) {
              _self.fullTime = true
            }
            _self.topMsgData.splice(0, 1, res.data)
            _self.bigImage = _self.topMsgData[0].pic_url
            _self.interval = setInterval(() => {
              if (_self.fullTime) {
                _self.fullTime = false
              }
            }, 8000)
            break
          case 'door':
            if (!_self.fullTime) {
              _self.fullTime = true
            }

            if (res.type === 'info') {
              _self.listData.splice(0, 1, res.data)
            } else if (res.type === 'warning') {
              _self.topMsgData.splice(0, 1, res.data)
              _self.bigImage = _self.topMsgData[0].pic_url
            }
            _self.interval = setInterval(() => {
              if (_self.fullTime) {
                _self.fullTime = false
              }
            }, 8000)
            break
          case 'car':
            if (!_self.fullTime) {
              _self.fullTime = true
            }
            _self.topMsgData.splice(0, 1, res.data)
            _self.bigImage = _self.topMsgData[0].pic_url
            _self.interval = setInterval(() => {
              if (_self.fullTime) {
                _self.fullTime = false
              }
            }, 8000)
            break
          default:
            break
        }

        if (res.module !== 'env' && res.type !== 'info') {
          this.siteNotify = this.$notify({
            title: res.data.event_module,
            message: res.data.event_msg,
            duration: 4500,
            position: 'bottom-right',
            type: 'warning',
            onClick: () => {
              this.siteNotify.close()
            }
          })
        }
      }
      ws.onclose = function () {
        // console.log('连接已关闭...')
      }
      this.over = () => {
        ws.close()
      }
    },
    getList () {
      this.$http.get('/api/door/inout_last', { params: { limit: 1 } }).then(response => {
        this.listData = response.data.data
      })
    },
    getMessageList () {
      this.$http.get('/api/report_last').then(response => {
        this.topMsgData = response.data.data
      })
    },
    getEnv () {
      this.$http.get('/api/env').then(response => {
        this.envData = response.data.data
      })
    },
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done) {
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '80px' },
          { complete: done }
        )
      }, 500)
    },
    leave: function (el, done) {
      Velocity(
        el,
        { opacity: 0, height: 0 },
        { complete: done }
      )
    },
    change: function (data) {
      const _self = this
      const _towerData = {
        '01': {
          height: 36,
          weight: 368,
          range: 35,
          wind: 15,
          moment: 152,
          dip: 4,
          rotation: 347.4
        },
        '02': {
          height: 73,
          weight: 22,
          range: 35,
          wind: 8,
          moment: 52,
          dip: 3,
          rotation: 58
        },
        '03': {
          height: 80,
          weight: 34,
          range: 72,
          wind: 2,
          moment: 30,
          dip: 5,
          rotation: 123
        },
        '04': {
          height: 58,
          weight: 8,
          range: 72,
          wind: 3,
          moment: 23,
          dip: 1,
          rotation: 123
        },
        '05': {
          height: 39,
          weight: 12,
          range: 55,
          wind: 5,
          moment: 32,
          dip: 3,
          rotation: 58
        }
      }
      let _chart = data
      let curIndex = 0

      _chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      const _timer = () => {
        return setInterval(function () {
          const dataLen = _chart.getOption().series[0].data.length

          _chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: curIndex
          })

          curIndex = (curIndex + 1) % dataLen
          // curIndex = Math.ceil(Math.random() * 4)
          _self.towerData = _towerData['0' + (curIndex + 1)]

          _chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: curIndex
          })
        }, 8000)
      }

      let execute = _timer()

      _chart.on('mouseover', function (params) {
        clearInterval(execute)
        _self.towerData = _towerData[params.name]

        if (params.dataIndex !== curIndex) {
          _chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: curIndex
          })
        }
      })

      _chart.on('mouseout', function (params) {
        execute = _timer()
        curIndex = params.dataIndex
        _chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: curIndex
        })
      })
    },
    legendData: function (params) {
      const _chart = params
      let curIndex = 0

      _chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0
      })

      const _timer = () => {
        return setInterval(() => {
          const dataLen = _chart.getOption().series[0].data.length

          _chart.dispatchAction({
            type: 'hideTip'
          })

          curIndex = (curIndex + 1) % dataLen

          _chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: curIndex
          })
        }, 5000)
      }

      let execute = _timer()
      _chart.on('mouseover', function () {
        clearInterval(execute)
      })
      _chart.on('mouseout', function () {
        execute = _timer()
        curIndex = params.dataIndex
        _chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: curIndex
        })
      })
    },
    getIcon: function (data) {
      return 'http://demo-dev.sadpu.com/cond_icon/' + data + '.png'
    }
  }
}
</script>
<style lang="scss" scoped>
.tags-views-container{
  position: relative;
  display: flex;
  padding: 25px 40px 20px 40px;
}
.tags-views-item{
  margin: 0 38px;
  .text{
    color: #4eb9e6;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    transition: all .3s ease;
  }
  &:hover{
    .bim-icon {
      transform: scale(1.1);
    }
    .text{
      transform: translateY(2px);
    }
  }
}
.mosaic-corner{
  position: absolute;
  right: 40px;
  bottom: 25px;
  display: flex;
}
.column-flex{
  display: flex;
  width: 18px;
  flex-flow: column-reverse;
  margin: 0 2px;
}
.square-block{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: #3983bc;
  &:nth-child(2){
    background-color: #2e6e9b;
  }
  &:nth-child(3){
    background-color: #124d6c;
  }
  &:nth-child(4){
    background-color: #083754;
  }
}
.bim-icon{
  transition: all .3s ease;
  width: 70px;
  height: 70px;
  background-color: rgba($color: #214d6c, $alpha: .5);
  border-radius: 50%;
  &-zh{
    background-image: url("../../assets/zh.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  &-power{
    background-image: url("../../assets/icn-power.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  &-perimeter{
    background-image: url("../../assets/icn-perimeter.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  &-entry{
    background-image: url("../../assets/icn-entry.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  &-environment{
    background-image: url("../../assets/icn-environment.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  &-tower{
    background-image: url("../../assets/icn-tower.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
}
.bim-row{
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  & + &{
    margin-top: 20px;
  }
}
.bim-col{
  &-520{
    width: 520px;
  }
  &-760{
    width: 760px;
  }
  &-full{
    width: 100%;
  }
  & + &{
    margin-left: 20px;
  }
}
.card-panel{
  background-color: rgba($color: #214d6c, $alpha: 0.5);
  &-entry{
    height: 190px;
  }
  &-tower{
    height: 330px;
  }
  &-map{
    height: 540px;
  }
  &-environment{
    height: 260px;
  }
  &-perimeter{
    height: 260px;
  }
  & + &{
    margin-top: 20px;
  }
}
.module-title{
  color: #4eb9e6;
  font-size: 14px;
  padding: 20px 0 30px 20px;
}
.personal{
  height: 80px;
  overflow: hidden;
  &-item{
    position: relative;
    width: 450px;
    height: 80px;
    margin-left: 35px;
    border-radius: 40px 0 0 40px;
    display: flex;
    transition: all 1s;
    float: left;
    &.exit{
      * {
        color: #8398a9 !important;
      }
      .item-profile{
        img{
          filter: grayscale(100%);
        }
      }
    }
  }
}
.item-profile{
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #45678a;
  padding: 2px;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.item-main{
  background-color: rgba($color: #2e6384, $alpha: .5);
  background-color: rgba(46, 99, 132, 0.5);
  flex: 1;
  padding-left: 55px;
  margin-left: 40px;
}
.item-extra{
  display: flex;
  align-items: flex-end;
  margin-top: 2px;
}
.item-type{
  font-size: 18px;
  color: #a2cfe5;
  line-height: 24px;
  margin-top: 12px;
}
.item-name{
  font-size: 24px;
  color: #d8eefe;
}
.item-time{
  font-size: 18px;
  color: #a2cfe5;
  margin: 0 12px;
}
.item-status{
  font-size: 20px;
  color: #00d5af;
}
.item-corner{
  background: url("../../assets/icn-share.png") no-repeat;
  width: 26px;
  height: 26px;
  position: absolute;
  right: 33px;
  top: 14px;
}
.main-tower{
  display: flex;
}
.chart-select{
  width: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-info{
  width: 264px;
  display: flex;
  flex-wrap: wrap;
  &-item{
    position: relative;
    width: 50%;
    padding-left: 26px;
    transition: all .5s ease;
  }
  .desc{
    h1{
      font-size: 22px;
      color: #d8eefe;
      margin: 0;
    }
    p{
      font-size: 12px;
      color: #a2cfe5;
    }
  }
}
.icn-spin{
  position: absolute;
  background-color: rgba($color: #2dfff5, $alpha: .2);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    display: block;
    content: '';
    background-color: #2dfff5;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
.card-panel-environment{
  position: relative;
}
.env-container{
  display: flex;
}
.env{
  &-left{
    width: 210px;
    overflow: hidden;
  }
  &-li{
    width: 50%;
    float: left;
    text-align: right;
    h3{
      font-size: 26px;
      color: #d8eefe;
      margin: 0;
    }
    p{
      font-size: 16px;
      color: #a2cfe5;
    }
  }
  &-right{
    position: relative;
    padding-left: 85px;
    color: #60e3fb;
    font-size: 16px;
    padding-right: 70px;
    flex: 1;
    .weather-block{
      margin-top: 10px;
      img{
      }
      p{
        margin: 20px 0 0;
      }
    }
    .week{
      margin-top: 15px;
    }
    .date{
      margin-top: 15px;
    }
    .clock{
      position: absolute;
      font-size: 74px;
      line-height: 64px;
      right: 70px;
      top: 0;
    }
  }
  &-corner{
    position: absolute;
    width: 36px;
    height: 36px;
    right: 29px;
    top: 17px;
    background: url("../../assets/icn-moment.png") no-repeat;
  }
}
.map-container{
  position: relative;
  margin: 0 20px 20px;
  video{
    display: block;
    width: 720px;
    height: 449px;
    background-color: #000;
  }
}
.warning-panel{
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
}
.warning-item {
  position: relative;
  .warning-pic {
    width: 720px;
    height: 449px;
    background-size: cover;
  }
  .warning-info{
    position: absolute;
    width: 100%;
    bottom: 45px;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    color: #fff;
    padding: 18px 0 18px 20px;
    text-align: center;
    letter-spacing: 2px;
  }
}
.warning-hide{
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  width: 100%;
  height: 100%;
  /*display: none;*/
}
.show_in{
  animation: go_in 1s;
  opacity: 1;
  visibility: visible;
  z-index: 20;
  width: 100%;
  height: 100%;
}
.show_out{
  animation: go_out 1s;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  width: 100%;
  height: 100%;
}
@keyframes go_in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes go_out {
  0% {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
  100%{
    opacity: 0;
    transform: scale(0);
  }
}
.perimeter{
  &-item{
    display: flex;
    padding-left: 20px;
    padding-right: 30px;
  }
  &-detail{
    flex: 1;
    padding-right: 30px;
    .title{
      font-size: 22px;
      color: #d8eefe;
      font-weight: normal;
      margin: 0 0 15px;
    }
    .type{
      font-size: 26px;
      color: #fe9127;
    }
    .datetime{
      font-size: 16px;
      color: #a2cfe5;
      margin-top: 25px;
    }
  }
  &-pic{
    padding: 4px;
    background-color: #1f527b;
    max-height: 148px;
    img{
      width: 250px;
      height: 140px;
    }
  }
}
.main-container{
  background: url("../../assets/bg.png") no-repeat 50% 50% #072849;
  width: 1920px;
  height: 1080px;
  margin: 0 auto;
}
.header-container{
  background-color: rgba($color: #093c5b, $alpha: .5);
  height: 60px;
  padding-left: 40px;
  h1{
    font-size: 24px;
    color: #d8eefe;
    line-height: 60px;
    font-weight: normal;
  }
}
.footer-container{
  .copyright{
    text-align: center;
    color: rgba($color: #92bfe0, $alpha: .5);
    font-size: 18px;
    line-height: 60px;
    b{
      color: rgba($color: #add8f8, $alpha: .5);
      font-weight: 500;
      letter-spacing: 2px;
      margin: 0 8px;
    }
  }
}
.slide-fade{
  &-enter-active{
    transition: all 1.5s;
  }
  &-leave-active{
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  &-enter, &-leave-to{
    transform: translateX(30px);
    opacity: 0;
  }
  &-move{
    transition: all 1s;
  }
}
.slide-fade2{
  &-enter-active,
  &-leave-active{
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  &-enter,
  &-leave-active{
    opacity: 0;
  }
  &-enter{
    transform: translateX(10px);
  }
  &-leave-active{
    transform: translateX(-20px);
  }
}
.chart-container{
  position: relative;
  width: 100%;
  height: 260px;
}
</style>
